import React, { useState } from 'react';
import styleHome from '../../style.module.less'
import CustomIcon from '@/components/CoustomIcon'

const Header = ({ totalExpense, totalIncome }) => {
  const [currentSelect, setCurrentSelect] = useState('');
  const [currentTime, setCurrentTime] = useState('2022-12');

  const toggle = () => { }

  const monthToggle = () => { }

  return (
    <div className={styleHome.header}>
      <div className={styleHome.dataWrap}>
        <span className={styleHome.expense}>总支出：<b>¥ {totalExpense}</b></span>
        <span className={styleHome.income}>总收入：<b>¥ {totalIncome}</b></span>
      </div>
      <div className={styleHome.typeWrap}>
        <div className={styleHome.left} onClick={toggle}>
          <span className={styleHome.title}>{currentSelect.name || '全部类型'} <CustomIcon className={styleHome.arrow} type="icon-arrow-down" /></span>
        </div>
        <div className={styleHome.right}>
          <span className={styleHome.time} onClick={monthToggle}>{currentTime}<CustomIcon className={styleHome.arrow} type="icon-arrow-down" /></span>
        </div>
      </div>
    </div>
  );
}

export default Header;

